<template>
  <div style="display: flex;width: 100%;" >
    <div style="flex: 1;width: 50%;padding-left:100px;padding-top: 40px">
      <SUpload></SUpload>
    </div>
    <div style="flex: 1.2;width: 50%;padding-top: 50px;padding-right: 100px;margin: 20px">
            <el-form model="form" size="large" :label-position="'left'" style="max-width: 460px" label-width="100px">
              <el-form-item label="编号" aria-required="true">
                <el-input v-model="goods.code" oninput="value=value.replace(/[^\d]/g,'')"></el-input>
              </el-form-item>
              <el-form-item label="商品名称" aria-required="true">
                <el-input v-model="goods.goodsName"></el-input>
              </el-form-item>
              <el-form-item label="品牌">
                <el-input v-model="goods.trademark"></el-input>
              </el-form-item>
              <el-form-item label="价格" aria-required="true">
                <el-input v-model="goods.price" oninput="value=value.replace(/[^\d.]/g,'')"></el-input>
              </el-form-item>
              <el-form-item label="成本" aria-required="true">
                <el-input v-model="goods.cost" oninput="value=value.replace(/[^\d.]/g,'')"></el-input>
              </el-form-item>

              <el-form-item label="库存">
                <el-input-number v-model="goods.goodsInventory" :min="0" />
              </el-form-item>
              <el-form-item label="商品类别">
                <el-select v-model="goods.categoryId" class="m-2" placeholder="Select" size="large">
                  <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                  />
                </el-select>
<!--                <div style="visibility: hidden">{{ options }}</div>-->
              </el-form-item>
              <el-form-item style="padding-top: 25px">
                <el-button type="primary" @click="onSubmit">新建商品</el-button>
              </el-form-item>
            </el-form>
    </div>
  </div>


</template>

<script>
import request from "@/utils/request";
import store from "@/store";
import {ref} from "vue";
import SUpload from "@/components/input/Image"
import 'ant-design-vue/dist/antd.css';




export default {
  name: "Input",
  components: {SUpload,Image},
  data() {
    return {
      options: [],

      goods:{
        categoryId: ref(store.getters.getData.category),
        goodsInventory:ref(store.getters.getData.goodsInventory),
        code:ref(store.getters.getData.code),
        goodsName:ref(store.getters.getData.goodsName),
        trademark:ref(store.getters.getData.trademark),
        price:ref(store.getters.getData.price),
        url:ref(store.getters.getData.url),
        cost:ref(store.getters.getData.cost)
      },


    }
  },
  // computed: {
  //   category(){
  //     return this.$store.getters.getlocalData
  //   }
  // },
  mounted() {
    this.getOptions()
  },
  // setup(){

  // }

  methods: {
    getOptions() {
      request.get("http://localhost:8002/goods/category").then(res => {
        let optionss = []
        console.log(res.data)
        for (let item in res.data) {
          optionss.push({value: res.data[item].categoryId, label: res.data[item].categoryName})
        }
        console.log(optionss)
        store.commit('setLocalData', optionss)
        console.log(store.getters.getlocalData)
        this.options = store.getters.getlocalData
      })
    },

    onSubmit(){
      this.goods.url=store.getters.getImageUrl
      // store.commit("setImageUrl",this.goods.url)
      request.post("http://localhost:8002/goods/add",this.goods).then(res=>{
        store.commit("setData",res.data)
        console.log("res::"+store.getters.getData)
        this.$router.push("/sms/goodsinfo")
      })
    }

  },


}


</script>

<style>
.avatar-uploader > .ant-upload {
  width: 400px;
  height: 400px;
}

.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}

</style>